<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">菜单管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 100px;">
						<div class="input-group-btn">

							<button type="button" class="btn btn-success btn-delete">
								删除</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
							<button type="button" class="btn btn-default btn-update">修改</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table id="menuTable" class="table table-hover">
					<thead>
						<tr>
							<th data-field="selectItem" data-checkbox="true"></th>
						</tr>
					</thead>

				</table>
			</div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript"
	src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script type="text/javascript"
	src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript"
	src="bower_components/treegrid/tree.table.js"></script>
<script type="text/javascript">
	/**
	 * 初始化表格的列
	 */
	var columns = [ {
		field : 'selectItem',
		radio : true
	}, {
		title : '菜单ID',
		field : 'id',
		align : 'center',
		valign : 'middle',
		width : '80px'
	}, {
		title : '菜单名称',
		field : 'name',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '130px'
	}, {
		title : '上级菜单',
		field : 'parentName',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '100px'
	}, {
		title : '类型',
		field : 'type',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '70px',
		formatter : function(item, index) {
			if (item.type == 1) {
				return '<span class="label label-success">菜单</span>';
			}
			if (item.type == 2) {
				return '<span class="label label-warning">按钮</span>';
			}
		}
	}, {
		title : '排序号',
		field : 'sort',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '70px'
	}, {
		title : '菜单URL',
		field : 'url',
		align : 'center',
		valign : 'middle',
		sortable : false,
		width : '240px'
	}, {
		title : '授权标识',//要显示的标题名称
		field : 'permission',//json串中的key
		align : 'center',//水平居中
		valign : 'middle',//垂直居中
		sortable : false
	//是否排序
	} ];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)

	$(function() {
		doGetObjects();
		$(".input-group-btn").on("click", ".btn-add", doLoadEditUI).on("click",
				'.btn-delete', doDeleteObject).on("click", ".btn-update",
				doLoadEditUI)
		
	})
	
	function doDeleteObject() {
		//1.获取选中的记录id
		var id = doGetCheckedId();
		if (!id) {
			alert("请先选择");
			return;
		}
		//2.异步提交请求删除数据
		var url = "menu/doDeleteObject.do";
		var params = {
			"id" : id
		};
		//执行异步删除
		$.post(url, params, function(result) {
			if (result.state == 1) {
				alert(result.message);
				//doGetObjects();
				doDeleteTrElement();
			} else {
				alert(result.message);
			}
		});
	}
	//删除页面上指定的tr元素
	function doDeleteTrElement() {
		//获取选中的input类型为radio的input对象
		var input = $("#menuTable input[type=radio]:checked")
		//获取input的父级元素
		var tr = input.parents("tr")
		//删除tr元素
		tr.remove()
	}
	function doGetCheckedId() {
		//1.获取选中的记录
		var selections = $("#menuTable")
		//bootstrapTreeTable是treeGrid插件内部定义的jquery扩展函数
		//getSelections为扩展函数内部要调用的一个方法
		.bootstrapTreeTable("getSelections");
		//2.对记录进行判定
		if (selections.length == 1)
			return selections[0].id;
	}
	function doLoadEditUI() {
		var title;
		if ($(this).hasClass("btn-add")) {
			title = "添加菜单"
		} else if ($(this).hasClass("btn-update")) {
			title = "修改菜单"
			//获取选中的记录数据
			var rowData = doGetCheckedItem();
			if (!rowData) {
				alert("请选择一个");
				return;
			}
			$("#mainContentId").data("rowData", rowData);
		}
		var url = "menu/doMenuEditUI.do";
		$("#mainContentId").load(url, function() {
			$(".box-title").html(title);
		})
	}
	function doGetCheckedItem() {
		var tr = $("tbody input[type='radio']:checked").parents("tr");
		return tr.data("rowData");
	}

	function doGetObjects() {
		var table = new TreeTable("menuTable", "menu/doFindObjects.do", columns);
		console.log(table)
		//table.setExpandColumn(2);

		table.init();
	}
</script>









